<template>
  <div class="settings-page">
    <Navbar :bg="navBg" :title="navTitle" />
    <div class="content">
      <van-cell
        class="cell-item"
        :title="item.title"
        v-for="item in settingItemsTop"
        :key="item.id"
        @click="onSettingClick(item)"
      >
        <template #icon>
          <SvgIcon :iconName="item.svg" color="#D7E5FC" size="25px" />
        </template>
        <template #right-icon>
          <SvgIcon iconName="s9" color="#D7E5FC" size="10px" />
        </template>
      </van-cell>
    </div>
    <div class="content">
      <van-cell
        class="cell-item"
        :title="item.title"
        v-for="item in settingItemsBottom"
        :key="item.id"
        @click="onSettingClick(item)"
      >
        <template #icon>
          <SvgIcon :iconName="item.svg" color="#D7E5FC" size="25px" />
        </template>
        <template #right-icon>
          <SvgIcon iconName="s9" color="#D7E5FC" size="10px" />
        </template>
      </van-cell>
    </div>
  </div>
</template>

<script setup lang="ts">
import Navbar from '@/components/Navbar.vue'
import { ref } from 'vue'
import { settingItemsTop, settingItemsBottom } from '@/utils/enum.js'

import { useRouter } from 'vue-router'
const router = useRouter()
console.log(router)

const navBg = ref('#fff')
const navTitle = ref('设置')

const emit = defineEmits([''])
const props = defineProps({
  propData: {
    type: String,
    default: ''
  }
})
console.log(props)
const onSettingClick = (item: any) => {
  router.push(item.path)
}
</script>
<style lang="less" scoped>
@import url(../assets/style/settings.less);
</style>
